<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo.</title>
    <!--<link rel="stylesheet" href="css/main.css" media="screen">-->
    <style type="text/css">
        @import "js/lib/dijit/themes/tundra/tundra.css";
        @import "js/lib/dojo/resources/dojo.css";
    </style>
<!--    <link rel="stylesheet" href="js/lib/dijit/themes/claro/claro.css" media="screen">-->
    <style>
        #dialog {
            min-width: 200px;
        }
    </style>
</head>
<body class="tundra">
<?php
/**
 * Created by IntelliJ IDEA.
 * User: Administrator
 * Date: 13-6-29
 * Time: 下午5:43
 * To change this template use File | Settings | File Templates.
 */
function __autoload($name)
{
    include_once("nodelist.php");
}

?>

<h1>Node list demo</h1>
<button type="button" id="btn">Pick out fresh fruits</button>

<h3>Fresh Fruits</h3>
<ul id="freshList"></ul>

<h3>Fruits</h3>

<ul>
    <li>Fruits
        <ul>
            <li class="alkaline">Apples</li>
            <li class="alkaline">Persimmons</li>
            <li class="alkaline">Thompson Grapes (Seedless)</li>
            <li class="alkaline">Muscat Grapes</li>
            <li class="alkaline">All Sweet Grapes</li>
            <li class="alkaline">Fresh Figs</li>
            <li class="alkaline">Dates</li>
            <li class="alkaline">Figs</li>
            <li class="alkaline">Raisins</li>
            <li class="alkaline">Prunes</li>
            <li class="alkaline">Apricots</li>
            <li class="alkaline">Peaches</li>
            <li class="alkaline">Bananas</li>
            <li class="alkaline">Cherries</li>
            <li class="alkaline">Bananas</li>
            <li class="alkaline">Litchi "Nuts"</li>
            <li class="alkaline">Carob</li>
        </ul>
</ul>


<!-- load Dojo -->
<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dojo/dojo.js"></script>
<script type="text/javascript">
    require(['dojo/query', "dojo/_base/lang", "dijit/form/CheckBox", "dojo/NodeList-html" , "dojo/domReady!"],
        function (query, lang) {
            var demo = {
                addCheckboxes: function (q) {
                    query(q).html('<input name="fruit" value ="" data-dojo-type="dijit/form/CheckBox">', {
                        onBegin: function () {
                            var label = lang.trim(this.node.innerHTML), cont = this.content + label;
                            cont = cont.replace('value=""', 'value="' + lang.trim(this.node.innerHTML) + '"');
                            this.content = cont;
                            return this.inherited("onBegin", arguments);
                        },
                        parseContent: true
                    });
                }
            };

            query("#btn").on("click", lang.hitch(demo, "addCheckboxes", "li.alkaline"));
        });
</script>

</body>
</html>

